/* global */
*{
    padding:0;
    margin:0;
}
span{
    color:#555555;
}
.clickable{
    color:#0DA8FF;
    cursor:pointer;
}
span + span{
}
/*global layout*/
body > *{
    width:100%;
}

body > div > .layout{
    margin:0 auto;
    width:966px;
}
body > .header{
    background-image:url("../images/headerRepeat.png");
    background-repeat:repeat-x;
    height:150px;
}
body > .footer{
    height:88px;
    margin-top:50px;
}
body > .footer span{
    text-align:center;
    display:block;
}
/*header*/

.header .logo{
    background-image:url("../images/bookLogo.jpg");
    background-repeat:no-repeat;
    padding-top:64px;
    float:left;
    margin-top:15px;
    padding-right:134px;
    margin-left:50px;
}
.header .logo .headerSlogan{
    display:inline-block;
    font-weight:900;
    color:#0288D6;
    margin-top:5px;
}
.header .userMenu{
    display:inline-block;
    padding:0 30px;
    overflow:hidden;
    position:absolute;
    top:0;
    right:0;
    margin-top:111px;
    margin-right:40px;
}
.header .userMenu > div{
    float:right;
    margin-left:-35px;
    margin-top:2px;
}
.header .userMenu > .front > .left >.right>.center{
    height:28px;
}
.header .userMenu .front{
    margin-top:0;
}
.header .headerSearchBox{
    background-image:url("../images/searchBox.png");
    background-color:white;
    background-repeat:no-repeat;
    width:267px;
    height:32px;
    float:right;
    margin-top:70px;
    margin-right:60px;
}
.header input{
    border:none;
    width:220px;
    margin:5px;
    font-size:18px;
    background-color:white;
    float:left;
}
.header .searchIcon{
    background-image:url("../images/searchIcon.png");
    width:14px;
    height:15px;
    margin:10px;
    float:right;
}
/*header end*/
/*controls*/
/*searchPage*/
.searchBox{
    height:300px;
    width:700px;
    margin:150px 220px 60px;
}
.searchBox > .searchInput{
    width:500px;
    height:50px;
    float:left;
    font-size:24px;
}
.searchBox > h3{
    color:#0288D6;
}
.searchBox > .searchSummit{
    width:120px;
    height:54px;
    font-size:20px;
}
/*end searcPage*/
/*profilePage*/
.upperTab{
    /*this make width change with the title length*/
    display:inline-block;
    overflow:hidden;
    margin-bottom:0px;
    margin-left:30px;
}
.upperTab h1{
    color:#0288D6;
    padding:8px 8px 0 8px;
    font-size:14px;
}
.tabUsername h1{
    background-image:url("../images/userIcon.png");
}
.tabSetting h1{
    background-image:url("../images/settingIcon.png");
}
.tabLoginAction h1{
    background-image:url("../images/loginIcon.png");
}
.tabSearch h1{
    background-image:url("../images/searchIcon.png");
}
.upperTab > .left{
    background-image:url("../images/upperTabSpriteLeft.png");
    background-repeat:no-repeat;
    background-position:left top;
    display:inline-block;
}
.upperTab > .left >.right{
    background-image:url("../images/upperTabSpriteRight.png");
    background-repeat:no-repeat;
    background-position:top right;
    margin-left:43px;
    display:inline-block;
}
.upperTab > .left> .right >.center{
    background-image:url("../images/upperTabMid.png");
    background-repeat:repeat-x;
    margin-right:43px;
    display:inline-block;
    height:28px;
    
}
.listItem .largeRoundBody{

}

.downTab{
    /*this make width change with the title length*/
    display:inline-block;
    overflow:hidden;
    margin-bottom:0px;
    margin-left:30px;
}

.downTab h1{
    color:#0288D6;
    padding:3px 8px 0 8px;
    font-size:14px;

    /*below for icon space*/
    background-position:right;
    padding-right:20px;
    background-repeat:no-repeat;
}

.downTab > .left{
    background-image:url("../images/downTabSpriteLeft.png");
    background-repeat:no-repeat;
    background-position:left bottom;
    display:inline-block;
}
.downTab > .left >.right{
    background-image:url("../images/downTabSpriteRight.png");
    background-repeat:no-repeat;
    background-position:bottom right;
    margin-left:43px;
    display:inline-block;
}
.downTab > .left> .right >.center{
    background-image:url("../images/downTabMid.png");
    background-repeat:repeat-x;
    margin-right:43px;
    background-position:bottom;
    display:inline-block;
    height:26px;
}
.infoBody{
    margin-top:-45px;
}
.infoBody >.largeRoundBody>.up >.down{
    padding-bottom:1;
    /*background-image:none;*/
} 
.largeRoundBody > .up > .down > .center{
    background-image:url("../images/largeRoundBodyMid.png");
    background-repeat:repeat-y;
    /*background-color:#f8f8f8;*/
    margin: 0 auto;
    z-index:100;
}
.largeRoundBody > .up > .down {
    background-image:url("../images/largeRoundBodyBottom.png");
    background-position:bottom left;
    background-repeat:no-repeat;
    padding-bottom:13px;
}
.largeRoundBody > .up{   
    z-index:100;
    background-image:url("../images/largeRoundBodyTop.png");
    background-position:top left;
    background-repeat:no-repeat;
    padding-top:13px;
    margin-top:-4px;
}
.listItem .largeRoundBody > .up > .down > .center{
    background-image:url("../images/smallRoundBodyMid.png");
    overflow:hidden;
}
.listItem .largeRoundBody > .up > .down {
    background-image:url("../images/smallRoundBodyBottom.png");
    background-position:bottom left;
    background-repeat:no-repeat;
    padding-bottom:17px;
    overflow:hidden;
}
.listItem .largeRoundBody > .up{
    
    z-index:100;
    background-image:url("../images/smallRoundBodyTop.png");
    background-position:top left;
    background-repeat:no-repeat;
    padding-top:17px;
    margin-top:-4px;
    overflow:hidden;
}
.listItem{
    margin-left:25px;
    width:818px;
}
.info{
    padding:50px 5px;
}
.info span{
    margin:10px 10px;
    display:inline-block;
}
.info > div >span
{
    border:none;
}
.info >div > .attrName{
    width:120px;
}
.listItem  .listContent{   
    background-color:white;
    border-top:none;
    margin:0 20px;
    overflow:hidden;
    display:inline-block;
    padding-top:20px;
    width:760px;
}
.listItem  .listContent > span
{
    display:inline-block;
    height:40px;
}
.notFirst{
    margin-top:-38px;
}
.listItem  .listContent >.attrName +span{
    border-left:none;
    margin-right:15px;
}
.attrName{
    margin:5px 0;
    padding-left:15px;
}
.listItem  .listContent > .actions{
    padding:10px 15px 30px 15px;
}
.orangeButton > .left{
    background-image:url("../images/orangeButtonSprite.png");
    background-position:left;
    padding-left:7px;
    background-repeat:no-repeat;
    display:inline-block;
}
.orangeButton >.left  > .right{
    background-image:url("../images/orangeButtonSprite.png");
    background-position:right;
    padding-right:7px;
    background-repeat:no-repeat;
}
.orangeButton>.left > .right> .center{
    background-image:url("../images/orangeButtonMid.png");
    background-repeat:repeat-x;
    height:27px;
    overflow:hidden;
    color:white;
}
.orangeButton>.left > .right> .center >span{
    color:white;
    padding-top:5px;
    float:left;
    font-size:14px;
}
.noResult{
    display:inline-block;
    padding:10px 20px 50px 30px;
    font-size:14px;
    font-weight:500;
}
/*end profilePage*/
/*start popBox*/
#loginBox{
    background-image:url("../images/popupBox.png");
    width:400px;
    height:200px;
    padding:50px 60px 140px;;
}
#loginBox h1{
    margin-bottom:10px;
}
#loginBox input{
    height:40px;
    width:350px;
    margin:10px 5px;
}
#loginBox label{
    width:100px;
    display:block;
}
#loginBox .button{
    color:black;
    height:40px;
    width:100px;
    font-size:20px;
    margin-top:10px;
    float:right;
    margin:10px;
}

#signUpBox{
    background-image:url("../images/popupBox.png");
    width:400px;
    height:200px;
    padding:50px 60px 140px;;
}
#signUpBox h1{
    margin-bottom:10px;
}
#signUpBox .formDiv{
    overflow:hidden;
    float:left;
}
#signUpBox input{
    height:30px;
    width:240px;
    margin:10px 5px;
    float:left;
}
#signUpBox label{
    display:block;
    float:left;
    width:120px;
    margin-top:15px;
}
#signUpBox .button{
    color:black;
    height:40px;
    width:100px;
    font-size:20px;
    margin-top:10px;
    margin-left:250px;
}
/*end popBox*/
/*searchListPage*/
.listIndex{
    float:right;
    margin-right:15px;
}
.listIndex > div{
    margin:3px;
    display:inline-block;
    float:left;
}
/*end searchListPage*/